<template>
  <view class="content">
    <view class="form">
      <view class="form-title">
        用户登录
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/phone.png" mode="aspectFit"></image>
          <view>手机</view>
        </view>
        
        <view class="value">
          <input type="text" v-model.trim="loginData.phone" placeholder="请输入手机号" />
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/security.png" mode="aspectFit"></image>
          <view>密码</view>
        </view>
        <view class="value">
          <input type="password" v-model.trim="loginData.password" placeholder="请输入密码" />
        </view>
      </view>
      
      <view>
        <checkbox-group  @change="rememberChange">
        <label>
          <checkbox
            class="remember"
            value="remember"
            :checked="loginData.remember"
            />
            记住我
        </label>
        </checkbox-group>
      </view>
    </view>
    <view class="tn-flex justify-center items-center tn-text-xs">
      <!-- <TnCheckbox v-model="loginData.agree" /> -->
      <checkbox-group @change="licenseAgreeChange">
        <label>
          <checkbox
            class="license"
            value="license"
            :checked="loginData.agree"
          />
        </label>
      </checkbox-group>
      <text>我已阅读并同意</text>
      <text class="tn-type-warning_text">《用户服务协议》</text>
      <text>和</text>
      <text class="tn-type-warning_text">《隐私政策》</text>
    </view>
    <view class="btn-action">
      <button
        class="login-btn"
        type="primary"
        :loading="loginData.loginLoading"
        @click="confirmLogin"
      >登录</button>
    </view>
    
    <!-- 快捷登录 -->
    <view class="fast-login">
      <view class="title">
        -- 快捷登录 --
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <view class="actions">
        <image src="/static/icons/weixin.png" mode="aspectFit" @click="wexinLogin" />
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script setup>
  import { reactive } from "vue";
  import { onLoad } from '@dcloudio/uni-app';
  import { TOKEN_KEY } from '@/configs/index.js';
  import { callCloudFunction } from '@/utils/cloudfunc';
  import { getStorageSync, setStorageSync } from "@/utils/store";
  
  // import TnCheckbox from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue'

  const loginData = reactive({
    phone: '',
    password: '',
    remember: false,
    loginLoading: false,
    agree: false
  })
  
  onLoad(() => {
    const upsd = getStorageSync('upsd')
    console.log(upsd);
    if (upsd) {
      loginData.phone = upsd.phone;
      loginData.password = upsd.password;
      loginData.remember = upsd.remember;
    }
  })
  
  const rememberChange = (e) => {
    if (e.detail.value.length > 0) {
      loginData.remember = true
    }
  }
  
  const licenseAgreeChange = (e) => {
    loginData.agree = e.detail.value  == 'license'
  }
  
  const confirmLogin = () => {
    console.log('确定登录');
    // 验证
    if (!loginData.phone || !loginData.password) {
      uni.showModal({
        content: '请输入手机号和密码!'
      })
      return;
    }
    if (!loginData.agree) {
      uni.showModal({
        title: '提示',
        content: '请阅读并勾选用户协议和隐私政策!'
      })
      return;
    }
    const cloudData = {
      action: 'phoneLogin',
      mobile: loginData.phone,
      password: loginData.password
    }
    if (loginData.remember) {
      // 保存用户名和密码在本机
      setStorageSync('upsd', {
        phone: cloudData.mobile,
        password: cloudData.password,
        remember: loginData.remember
      })
    } else {
      setStorageSync('upsd', null)
    }
    uni.showLoading({
      title:'登录中',
      mask:true,
    })
    callCloudFunction({
      name: 'ume-user',
      data: cloudData
    }).then(res => {
      uni.hideLoading()
      if (res.token) {
        // 登录成功
        setStorageSync(TOKEN_KEY, res.token)
        console.log('登录成功返回:', res);
        uni.navigateBack()
      } else {
        // 登录失败
        const message = res.message
        uni.showModal({
          title: '登录失败',
          content: message,
          showCancel: false,
        })
      }
    })
  }
  
  const wexinLogin = () => {
    uni.login({
      provider: 'weixin', //使用微信登录
      success: (loginRes) => {
        console.log(loginRes.code); // 临时code
        sendWeixinLogin(loginRes.code)
      },
      fail: () => {
        uni.showModal({
          title: '失败',
          content: '登录失败,请重试或使用其他方式登录!'
        })
      }
    });
    // uni.showModal({
    //   title:'开发中',
    //   content:'微信登录即将上线，敬请期待！',
    //   showCancel: false,
    // })
  }
  
  const sendWeixinLogin = (wxcode) => {
    uni.showLoading({
      title: '登录中'
    })
    callCloudFunction({
      name: 'ume-user',
      data: { action: 'weixinLogin', wxcode: wxcode}
    }).then(res => {
      console.log('res');
      uni.hideLoading()
      if (res.token) {
        // 登录成功
        setStorageSync(TOKEN_KEY, res.token)
        uni.navigateBack()
      } else {
        uni.showModal({
          title: '失败',
          content: res.message
        })
      }
    })
  }
</script>

<style lang="scss">
.content {
  .form {
    padding: 20rpx;
    .form-title {
      line-height: 100rpx;
      font-size: 38rpx;
      font-weight: 700;
    }
    .form-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      line-height: 80rpx;
      margin-bottom: 20rpx;
      border-bottom: 1px solid #eee;
      .label {
        width: 160rpx;
        display: flex;
        align-items: center;
        flex-direction: row;
        color: #555;
        font-weight: 700;
        image {
          width: 50rpx;
          height: 50rpx;
          margin-right: 10rpx;
          transform: scale(0.8);
        }
      }
      .value {
        margin-left: 20rpx;
        width: 100%;
        height: 60rpx;
        input {
          height: 60rpx;
          color: #007aff
        }
      }
    }
    .remember {
      transform: scale(0.7);
    }
  }
  .license {
    transform: scale(0.6);
  }
  .btn-action {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    .login-btn {
      width: 50%;
    }
  }
  .fast-login {
    margin-top: 40rpx;
    .title {
      color: #999;
      font-size: 26rpx;
      text-align: center;
    }
    .actions {
      display: flex;
      justify-content: center;
      flex-direction: row;
      margin-top: 40rpx;
      align-items: center;
      image{
        width: 60rpx;
        height: 60rpx;
        margin: 20rpx;
      }
    }
  }
}
</style>